<template>
  <div class="test d-flex fl-col ">
  <div class="toppic">
    <img :src="this.$route.query.pic" alt="">
  </div>
  <div class="testmain mt-3 p-2">
    <div class="test-header">考试概要</div>
    <div class="test-content p-3" >
      <div class="title text-center text-dark fs-18 mb-3">{{this.$route.query.title}}</div>
      <div class="name d-flex jc-center ai-center fl-col mb-3">
        <p class="mb-1">出题人</p>
        <p>{{this.$route.query.name}}</p>
      </div>
      <div class="mess  mt-4" v-for="(item,i) in model" :key="i" >
       <div class="d-flex jc-around"> 
         <div class="num d-flex fl-col jc-center ai-center">
          <span class="fs-18 mb-3 tip">{{item.totalTitle}}题</span>
          <div> <span class="iconfont icon-timu"></span> <span>题目总数</span></div>
        </div>
        <div class="sroce d-flex fl-col jc-center ai-center">
          <span class="fs-18 mb-3 tip">{{item.totalScore}}分</span>
           <div> <span class="iconfont icon-edu-fenshu"></span> <span>题目总分</span></div>
        </div>
        <div class="duration d-flex fl-col jc-center ai-center">
          <span class="fs-18 mb-3 tip">{{item.duration}}分钟</span>
           <div> <span class="iconfont icon-shijian"></span> <span>考试时长</span></div>
        </div>
        </div>
          <div class="text-center mt-5 "  > <el-button type="text" @click="open(item._id)">开始答题</el-button></div>
      <!-- :to=" `/questions/${item._id}`" -->
       <!-- <el-button type="text" @click="open">点击打开 Message Box</el-button> -->
      </div>
      
    </div>
    <div class="message">
    
    </div>
  </div>
  <div class="instruction mt-3 p-2">
    <div class="inst-header">考试说明</div>
    <div class="inst-content p-3" v-html="this.$route.query.instructions"></div>
  </div>
  <div class="foot"></div>
  
  
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: [

      ],
      num: '',
      messageShow: false
    }
  },
   props: {
    id: {
      required: true
    },
  },
  computed: {
  },
  methods: {
 
          open(id) {
        this.$prompt('请输入你的姓名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
           this.$router.push( {path:`/questions/${id}/${value}` ,
           query: {val: value,icon: this.$route.query.icon,title: this.$route.query.title,instructions: this.$route.query.instructions,name: this.$route.query.name}})
           
          this.$message({
            type: 'success',
            message: '请开始答题' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },
         message(id) {
   this.messageShow = true
   

    },
    async fetch() {
      const res = await this.$http.get(`/test/${this.id}`)
      this.model = res.data
     
    },
   
  },
  created() {
    this.fetch()
  },
}
</script>

<style>

</style>